<template>
  <div class="Pagination-box">
    <!-- 分页器 -->
    <!-- 属性 -->
    <!-- small 是否使用小型分页样式-->
    <!-- layout 组件布局，子组件名用逗号分隔-->
    <!-- page-size 每页显示条目个数  -->
    <!-- total 总条目数 -->
    <!-- current-page  当前页数-->
    <!-- disabled  	是否禁用分页-->
    <!-- background  是否为分页按钮添加背景色-->
    <!--  total 总的条数  sizes 每页的数量  jumper表示跳页的元素 prev表示上一页  next表示下一页 pager表示页码列表-->

    <!-- 事件 -->
    <!--  @size-change  page-size 改变时触发-->
    <!-- current-change  current-page 改变时触发-->
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"  
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    />
  </div>
</template>

<script >
  import { ref } from 'vue'
  export default {
    props: {
      total: {
      type:number,
      default:0
    }
    }
    
  }

   const currentPage4 = ref(4)
   const pageSize4 = ref(100)

   
</script>

<style lang="less" scoped>
 
</style>
